<!--
 * @Author: ryo
 * @Date: 2021-11-19 16:07:12
 * @LastEditors: ryo
 * @LastEditTime: 2021-11-26 16:08:27
 * @Description: 全局footer组件
 * @FilePath: \site\src\components\common\Footer.vue
-->
<template>
  <v-footer color="px-0" class="footer">
    <div class="footer_links mx-auto py-10">
      <dl class="links" v-for="link in linksModel.list" :key="link.id">
        <dt class="mb-5">{{ link.title }}</dt>
        <dd v-for="sub in link.subMenu" :key="sub.id">
          <a :href="sub.link">{{ sub.title }}</a>
        </dd>
      </dl>
    </div>
    <div class="footer_number pa-2">
      网站备案号：京ICP备11010171号-3 Copyright &copy;
      2021北京大成国测科技有限公司
    </div>
  </v-footer>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      linksModel: {
        list: [
          {
            id: Symbol(),
            title: '关于我们',
            subMenu: [
              { id: Symbol(), title: '人才招聘', link: '/' },
              { id: Symbol(), title: '企业文化', link: '/' },
              { id: Symbol(), title: '企业荣誉', link: '/' },
              { id: Symbol(), title: '领导致辞', link: '/' }
            ]
          },
          {
            id: Symbol(),
            title: '产品中心',
            subMenu: [
              { id: Symbol(), title: '自动监测物位计', link: '/' },
              { id: Symbol(), title: '北斗卫星测站', link: '/' },
              { id: Symbol(), title: '地勘智能系统', link: '/' },
              { id: Symbol(), title: '异物防侵系统', link: '/' }
            ]
          },
          {
            id: Symbol(),
            title: '新闻动态',
            subMenu: [
              { id: Symbol(), title: '企业资讯', link: '/' },
              { id: Symbol(), title: '行业新闻', link: '/' }
            ]
          },
          {
            id: Symbol(),
            title: '工程业绩',
            subMenu: [
              { id: Symbol(), title: '哈大客专路基', link: '/' },
              { id: Symbol(), title: '哈大客专路基', link: '/' },
              { id: Symbol(), title: '哈大客专路基', link: '/' }
            ]
          },
          {
            id: Symbol(),
            title: '大成服务',
            subMenu: [{ id: Symbol(), title: '团队建设', link: '/' }]
          },
          {
            id: Symbol(),
            title: '联系我们',
            subMenu: [{ id: Symbol(), title: '团队建设', link: '/' }]
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.footer {
  color: #fff !important;
  background: #1a212a !important;

  &_links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
  }

  &_number {
    flex: 0 0 100%;
    text-align: center;
    background: #111111;
  }

  .links {
    position: relative;
    text-align: center;

    @media screen and (min-width: 760px) {
      &:not(:last-of-type)::after {
        content: '';
        position: absolute;
        top: 0;
        right: -25px;
        width: 1px;
        background: #ffffff;
        height: 100%;
        opacity: 0.3;
      }
    }

    dd {
      a {
        font-size: 14px;
        color: #ffffff;
        opacity: 0.5;
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
